.btn {
    width:          auto;
    height:         auto;
    background:     white;
    border-radius:  3px;
    padding:        8px 15px;
    margin:         0;
    letter-spacing: $letter-spacing-base;
    font-size:      $font-size-base;
    cursor:         pointer;

    &:hover,
    &:focus,
    &:active {
        text-decoration: none;
    }
}

// Disabled button
.btn--disabled,
.btn--disabled:hover {
    color:           lighten(map-get($colors, light), 10) !important;
    border:          1px solid lighten(map-get($colors, light), 10);
    cursor:          not-allowed;
    text-decoration: none;
}

// Color variant
.btn--default {
    @include button-color-variant(map-get($colors, light));
}

.btn--success {
    @include button-color-variant(map-get($colors, success));
}

.btn--primary {
    @include button-color-variant(map-get($colors, primary));
}

.btn--danger {
    @include button-color-variant(map-get($colors, danger));
}

// Size variant
.btn--medium {
    @include button-size-variant(map-get($font-size, medium), 8px 15px);
}

.btn--small {
    @include button-size-variant(map-get($font-size, small), 8px 15px);
}